বুটস্ট্রাপ ৫ আপনাকে ব্যাকগ্রাউন্ড এবং টেক্সট কালার খুব সহজে কাস্টমাইজ করার জন্য প্রস্তুত ক্লাস প্রদান করে। এই ক্লাসগুলো ব্যবহার করে আপনি যে কোনো উপাদানের ব্যাকগ্রাউন্ড এবং টেক্সটের রঙ দ্রুত পরিবর্তন করতে পারেন। এটি বিশেষভাবে ব্যবহারকারীর অভিজ্ঞতা (UX) উন্নত করতে সাহায্য করে, কারণ বিভিন্ন রঙের কম্বিনেশন পেজের ভিজ্যুয়াল অ্যাপিল বাড়ায় এবং কন্টেন্টকে আরও পড়ার উপযোগী করে তোলে।
বুটস্ট্রাপ ৫ এর মাধ্যমে সহজেই বিভিন্ন ব্যাকগ্রাউন্ড কালার কাস্টমাইজ করা যায়। বুটস্ট্রাপ predefined ব্যাকগ্রাউন্ড কালার ক্লাস সরবরাহ করে, যা আপনাকে মাত্র কয়েকটি ক্লাস ব্যবহার করেই ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করতে সাহায্য করবে।
<div class="container">
<div class="row">
<div class="col bg-primary text-white">
এই কলামের ব্যাকগ্রাউন্ড নীল এবং টেক্সট সাদা।
</div>
<div class="col bg-success text-white">
এই কলামের ব্যাকগ্রাউন্ড সবুজ এবং টেক্সট সাদা।
</div>
</div>
</div>
এই উদাহরণে, প্রথম কলামের ব্যাকগ্রাউন্ড bg-primary (নীল) এবং দ্বিতীয় কলামের ব্যাকগ্রাউন্ড bg-success (সবুজ) ব্যবহার করা হয়েছে।
টেক্সটের রঙ পরিবর্তন করার জন্য বুটস্ট্রাপ ৫ অনেক predefined ক্লাস প্রদান করে। আপনি text-* ক্লাস ব্যবহার করে সহজেই টেক্সটের রঙ পরিবর্তন করতে পারবেন।
<div class="container">
<div class="row">
<div class="col text-primary">
এই টেক্সটের রঙ নীল।
</div>
<div class="col text-danger">
এই টেক্সটের রঙ লাল।
</div>
<div class="col text-success">
এই টেক্সটের রঙ সবুজ।
</div>
</div>
</div>
এখানে, text-primary, text-danger, এবং text-success ক্লাস ব্যবহার করে টেক্সটের রঙ পরিবর্তন করা হয়েছে।
আপনি একই সময়ে ব্যাকগ্রাউন্ড এবং টেক্সট কালার একসাথে কাস্টমাইজ করতে পারেন। এর ফলে আপনি একটি কন্টেইনার বা কলামে সম্পূর্ণ ডিজাইন পরিবর্তন করতে পারবেন।
<div class="container">
<div class="row">
<div class="col bg-dark text-white">
এই কলামের ব্যাকগ্রাউন্ড গা dark এবং টেক্সট সাদা।
</div>
<div class="col bg-light text-dark">
এই কলামের ব্যাকগ্রাউন্ড হালকা এবং টেক্সট গা dark।
</div>
</div>
</div>
এখানে, প্রথম কলামে bg-dark এবং text-white ক্লাস ব্যবহার করা হয়েছে, যার মানে গা dark ব্যাকগ্রাউন্ড এবং সাদা টেক্সট। দ্বিতীয় কলামে bg-light এবং text-dark ক্লাস ব্যবহার করা হয়েছে, যার মানে হালকা ব্যাকগ্রাউন্ড এবং গা dark টেক্সট।
যদি আপনি বুটস্ট্রাপের predefined রঙগুলোর বাইরে কিছু কাস্টম রঙ ব্যবহার করতে চান, তবে আপনি CSS ব্যবহার করতে পারেন।
<style>
.custom-bg {
background-color: #ffcc00; /* হলুদ ব্যাকগ্রাউন্ড */
color: #003366; /* গা dark নীল টেক্সট */
}
</style>
<div class="container">
<div class="row">
<div class="col custom-bg">
এই কলামে কাস্টম ব্যাকগ্রাউন্ড এবং টেক্সট কালার রয়েছে।
</div>
</div>
</div>
এখানে, CSS দিয়ে .custom-bg ক্লাসে কাস্টম ব্যাকগ্রাউন্ড এবং টেক্সট কালার নির্ধারণ করা হয়েছে।
বুটস্ট্রাপ ৫ এর মাধ্যমে ব্যাকগ্রাউন্ড এবং টেক্সট কালার কাস্টমাইজ করা খুবই সহজ এবং দ্রুত। আপনি predefined bg- ও text-** ক্লাস ব্যবহার করে বা CSS এর মাধ্যমে আপনার ওয়েব পেজের উপাদানগুলোর রঙ পরিবর্তন করতে পারেন। এর ফলে, আপনি আপনার ওয়েব ডিজাইনকে আরও আকর্ষণীয় এবং ব্যবহারকারী বান্ধব করতে পারবেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
